import React, { Component } from 'react';
import '../style/Login.scss'


import { NavBar, Form, Input, Button, Toast } from 'antd-mobile'
import { MoreOutline, EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import service from '../api';


interface State {
    visible: boolean
}

class Login extends Component<any, State> {
    constructor(props: any) {
        super(props);
        this.state = {
            visible: false
        }
    }
    async onFinsh(value: any) {
        // console.log(value);
        var res = await service.user.login({ tel: value.name, password: value.password })
        // console.log(res);
        if (res.data.code == 200) {
            this.props.history.push('/')
            Toast.show({ content: '登录成功' })
            localStorage.setItem('token', res.data.data.token)
            localStorage.setItem('userid', res.data.data.userid)
            localStorage.setItem('tel',value.name)
        } else {
            Toast.show({
                icon: 'fail',
                content: '密码错误',
            })
        }

    }
    render() {
        return (
            <div className='login'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.push('/') }} right={<MoreOutline style={{ fontSize: 35 }} />}>登录</NavBar>
                </div>

                <Form
                    onFinish={(value) => { this.onFinsh(value) }}
                    footer={
                        <Button block type='submit' color='danger' size='large' shape='rounded'>
                            登录
                        </Button>
                    }
                >
                    <Form.Item
                        name='name'
                        rules={[{ required: true, message: '电话号不能为空' }]}
                    >
                        <Input clearable placeholder='请输入电话号' />
                    </Form.Item>
                    <Form.Item
                        name='password'
                        extra={
                            <div className='eye'>
                                {!this.state.visible ? (
                                    <EyeInvisibleOutline onClick={() => { this.setState({ visible: true }) }} />
                                ) : (
                                    <EyeOutline onClick={() => { this.setState({ visible: false }) }} />
                                )}
                            </div>
                        }
                    >
                        <Input
                            placeholder='请输入密码'
                            clearable
                            type={this.state.visible ? 'text' : 'password'}
                        />
                    </Form.Item>
                </Form>
                <p onClick={() => { this.props.history.push('/register') }}>手机快速注册</p>

            </div>
        );
    }
}

export default Login;